<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<!-- 异步脚本 -->

<!-- <script src="./a.js" defer></script>
<script src="./b.js" defer></script> -->

<!-- <script src="./a.js" async></script>
<script src="./b.js" async></script> -->

<script type="module" src="./a.js"></script>
<script type="module" src="./b.js"></script>
</head>
<body>

<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
<!-- 假设渲染到这里，异步脚本加载完成 -->
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
    
<!-- 正常的同步加载脚本 -->
<!-- <script src="./a.js"></script>
<script src="./b.js"></script> -->
<script>
// 同步加载脚本
// 我们之前正常引入的js脚本都是同步加载执行的
// 当浏览器渲染线程解析到script标签时，暂时渲染页面，先加载并执行js脚本，之后再继续渲染页面

// 异步加载脚本
// 浏览器允许异步加载脚本
// 在script标签上添加 defer 或 async 属性，当前脚本就会异步加载
// defer 异步加载脚本等到当前页面DOM加载完成后再依次执行
// async 异步加载脚本，脚本加载完成后立即执行

// 多个defer脚本时，会按照书写顺序依次执行
// 多个async脚本时，不一定按照书写顺序执行

// 当我们给script标签设置 type="moduel" 属性时，当前脚本也是异步加载脚本
// 类似于 defer 脚本

</script>
</body>
</html>